<template>
    <div v-if="siteLinks2[0]" class="links">
        <div class="line">
            <Icon size="20">
                <Link/>
            </Icon>
            <span class="title">网站列表</span>
        </div>
        <!-- 网站列表 -->
        <Swiper
                v-if="siteLinks2[0]"
                :modules="[Pagination, Mousewheel]"
                :mousewheel="true"
                :pagination="{
        el: '.swiper-pagination',
        clickable: true,
        bulletElement: 'div',
      }"
                :slides-per-view="1"
                :space-between="40"
        >

            <SwiperSlide v-for="site in siteLinksList" :key="site">
                <el-row :gutter="20" class="link-all">
                    <el-col v-for="(item, index) in site" :key="item" :span="8">
                        <div
                                :style="index < 3 ? 'margin-bottom: 20px' : null"
                                class="item cards"
                                @click="jumpLink(item)"
                        >
                            <!--              <Icon size="26">-->
                            <!--                <component :is="siteIcon[item.icon]" />-->
                            <!--              </Icon>-->
                            <el-avatar :size="50" class="item-image"
                                       src="https://pic4.zhimg.com/v2-56d2d062dea3af5207ee19320fb63e87_b.jpg">
                            </el-avatar>
                            <!--                头图像,然后就是描述-->
                            <span class="name text-hidden">{{ item.name }}</span>
                        </div>
                    </el-col>
                </el-row>
            </SwiperSlide>
            <div class="swiper-pagination"/>
        </Swiper>
    </div>
</template>

<script setup>
import {Icon} from "@vicons/utils";
// 可前往 https://www.xicons.org 自行挑选并在此处引入
import {Link} from "@vicons/fa"; // 注意使用正确的类别
import {mainStore} from "@/store";
import {Swiper, SwiperSlide} from "swiper/vue";
import {Mousewheel, Pagination} from "swiper";
import "swiper/scss";
import "swiper/scss/pagination";
import {computed, h, onMounted, ref} from "vue";
import {getSiteInfos} from "@/api/index.js";
import {Error} from "@icon-park/vue-next";

const store = mainStore();
let siteLinks2 = ref([]);
// 计算网站链接
const siteLinksList = computed(() => {
    const result = [];
    for (let i = 0; i < siteLinks2.value.length; i += 6) {
        const subArr = siteLinks2.value.slice(i, i + 6);
        result.push(subArr);
    }
    return result;
});

// 链接跳转
const jumpLink = (data) => {
    window.open("https://" + data.link, "_blank");
};

// 获取所有网站列表
const getSiteLinks = () => {
    getSiteInfos()
        .then((res) => {
            siteLinks2.value = res.data;
        })
        .catch(() => {
            ElMessage({
                message: "网站列表获取失败",
                icon: h(Error, {
                    theme: "filled",
                    fill: "#efefef",
                }),
            });
        });
}

onMounted(() => {
    getSiteLinks()
});
</script>

<style lang="scss" scoped>
.links {
  .line {
    margin: 2rem 0.25rem 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    animation: fade 0.5s;

    .title {
      margin-left: 8px;
      font-size: 1.15rem;
      text-shadow: 0 0 5px #00000050;
    }
  }

  .swiper {
    left: -10px;
    width: calc(100% + 20px);
    padding: 5px 10px 0;
    z-index: 0;

    .swiper-slide {
      height: 100%;
    }

    .swiper-pagination {
      position: static;
      margin-top: 4px;

      :deep(.swiper-pagination-bullet) {
        background-color: #fff;
        width: 18px;
        height: 4px;
        border-radius: 4px;
        transition: opacity 0.3s;

        &:hover {
          opacity: 1;
        }
      }
    }
  }

  .link-all {
    height: 220px;

    .item {
      height: 100px;
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: center;
      padding: 0 10px;
      animation: fade 0.5s;

      &:hover {
        transform: scale(1.02);
        background: rgb(0 0 0 / 40%);
        transition: 0.3s;
      }

      &:active {
        transform: scale(1);
      }

      .name {
        font-size: 1.1rem;
        margin-left: 8px;
      }


      @media (min-width: 720px) and (max-width: 820px) {
        .name {
          display: none;
        }
      }
      @media (max-width: 720px) {
        height: 80px;
      }
      @media (max-width: 460px) {
        flex-direction: column;
        .name {
          font-size: 1rem;
          margin-left: 0;
          margin-top: 8px;
        }
      }
    }

    @media (max-width: 720px) {
      height: 180px;
    }
  }
}
</style>
